
<template>
  <div class="uploadImg" v-loading="uploading">
    <div class="upload-content">
      <!-- 上传图片区域 -->
      <ul class="img-list">
        <div v-if="uploadFlag">
          <li
            class="show-img"
            v-for="(item, index) in imgList"
            :key="index"
            :class="uploadStyle.class"
            @mouseenter="isShowMsk = true"
            @mouseleave="isShowMsk = false"
          >
            <img :src="item" class="proof" alt />
            <transition name="fade">
              <div class="msk" v-show="isShowMsk">
                <i
                  class="el-icon-zoom-in ico magnify"
                  @click="showBigImg($event, item)"
                ></i>
                <i class="el-icon-delete ico delete" @click="delImg(index)"></i>
              </div>
            </transition>
          </li>
        </div>
        <div class="uploadSec" v-else :class="uploadStyle.class">
          <i class="el-icon-upload2 ico"></i>
          <input
            type="file"
            class="choose"
            value
            :id="getId"
            @change="onUpload"
            multiple
          />
        </div>
      </ul>
    </div>
    <!-- 预览 -->
    <el-dialog
      :visible.sync="dialogVisible"
      width="80vw"
      :modal-append-to-body="true"
      append-to-body
      @close="closeFnc"
    >
      <img width="100%" :src="dialogImageUrl" alt="" />
    </el-dialog>
  </div>
</template>

<script>
/* eslint-disable */
export default {
  data() {
    return {
      imgList: [], // 图片列表,预览
      fileList: [], // 上传列表
      upImgList: [], // 暂存图片地址
      uploadNum: 1, // 最大上传数量
      upNum: 0, // 上传图片的数量
      isShowDel: true, //
      isShowMsk: false,
      uploadFlag: false, // 是否上传了
      //  预览
      dialogVisible: false,
      dialogImageUrl: "",
      uploading: false,
    };
  },
  props: ["closeFlag", "uploadStyle", "keyC", "loadImgUrl", "id"],
  created() {},
  mounted() {},
  computed: {
    showMsk() {},
    closeMsk() {},
    getId() {
      return this.id;
    },
    // 标识不同的上传地方 0 该组件只上传一个 1 表示 武宣图第一个 2 表示 武宣图第二个
    getkeyC() {
      return this.keyC;
    },
    getUploadStyle() {
      return this.uploadStyle;
    },
    // 判断有没有url 有的话给显示,没得话不显示
    getLoadImgUrl() {
      if (!!this.loadImgUrl) {
        this.imgList = [];
        this.uploadFlag = true;
        this.imgList.push(this.loadImgUrl);
      }
      // 对于循环读图的五宣图, 需要处理下,当 当前的key所在的 store 位置上为true时,表明当前位置被删除了,清零
      if (this.uploadStyle.class == "gameFivePublicity") {
        if (this.$store.state.operate.index[this.getkeyC]) {
          this.imgList = [];
          this.uploadFlag = false;
          this.imgList.push(this.loadImgUrl);
        }
        // 处理始终展示第一张图片问题
        if (this.$store.state.operate.url[this.getkeyC]) {
          this.imgList = [];
          this.uploadFlag = true;
          this.imgList.push(this.$store.state.operate.url[this.getkeyC]);
        }
      }
      return this.loadImgUrl;
    },
    getCloseFlag() {
      return this.closeFlag;
    },
    clooseDialogFlag() {
      return this.$store.state.operate.newGameFlag;
    },
  },
  watch: {
    getLoadImgUrl(newVal, oldVal) {},
    imgList() {
      this.$emit("changeNum"); //触发父组件中验证资料是否完整的方法
    },
    // 父弹窗关闭清零
    getCloseFlag() {
      if (this.getCloseFlag) {
        this.upNum = 0;
        this.imgList = [];
        this.fileList = [];
        this.upImgList = [];
        this.uploadFlag = false;
        console.log("this.imgList", this.imgList);
        this.$emit("flag", !this.closeFlag);
      }
    },
    clooseDialogFlag() {
      this.upNum = 0;
      this.imgList = [];
      this.fileList = [];
      this.upImgList = [];
      this.uploadFlag = false;
    },
  },
  methods: {
    closeFnc() {
      this.dialogVisible = false;
    },
    // 上传操作
    onUpload(e) {
      console.log("e", e);
      let nodeList = document.getElementById(this.getId);
      let photoFile = e.target;
      let val = e.target.value;
      // 判断是否符合上传条件
      if (photoFile.files.length === 0) return false;
      for (let i = 0; i < photoFile.files.length; i++) {
        this.fileAdd(photoFile.files[i], i);
      }
      nodeList.value = ""; // 上传完就清空上传文件的内容，不然重复添加一个文件会上传不上去
    },
    // 添加图片
    fileAdd(file, index) {
      // let csrf_token = this.getCookie("XSRF-TOKEN")
      let formFile = new FormData();
      let imgName = "file";
      formFile.append(imgName, file);
      // formFile.append("_token", csrf_token)
      let name = file.name;
      let size = file.size;
      let types = ".jpg,.jpeg,.png,.gif"; //文件格式
      let fileExt = name.substring(name.lastIndexOf(".")).toLowerCase();
      let result = types.indexOf(fileExt);
      if (result < 0) {
        //验证图片格式
        this.$message.warning("图片格式不正确");
        return false;
      }
      if (size > 1 * 1024 * 1024) {
        this.$message.warning("图片大小不能大于1M");
        return false;
      }
      if (this.fileList.length >= this.uploadNum) {
        this.$message.warning("图片最多只能上传" + this.uploadNum + "张");
        return false;
      }
      this.uploading = true;
      this.$api
        .uploadFile(formFile)
        .then((res) => {
          this.uploading = false;
          if (res.code == 101) {
            this.upNum = this.fileList.length + 1; //计算图片数量
            this.fileList.push(file); //添加进图片数组
            let imgUrl = res.data; //图片回显地址
            this.uploadFlag = true; // 是否有图 - 有
            this.$store.commit("changeDeleteIndex", [this.getkeyC, false]); // store 改为false
            this.$store.commit("changeDeleteUrl", [this.getkeyC, imgUrl]); // store 改为false
            this.imgList = [];
            this.imgList.push(imgUrl);
            this.upImgList.push(imgUrl);
            let upImgAll = this.upImgList.join(",");
            this.$emit("imgInfo", upImgAll, this.getkeyC, this.getUploadStyle);
          }
        })
        .catch((err) => {
          console.log(err);
        });
    },
    // 查看大图
    showBigImg(e, imgUrl) {
      this.dialogVisible = true;
      this.dialogImageUrl = imgUrl;
    },
    // 删除图片
    delImg(index) {
      this.imgList = []; //图片列表,预览 -1
      this.fileList = []; //上传列表 -1
      this.upImgList = []; //暂存图片地址 -1
      this.uploadFlag = false; // // 是否有图 - 无
      this.isShowMsk = false;
      this.upNum = this.imgList.length;
      let imgAll = this.imgList.join(",");
      this.$store.commit("changeDeleteIndex", [this.getkeyC, true]); // store 改为true
      this.$store.commit("changeDeleteUrl", [this.getkeyC, ""]); // store 改为false
      this.$emit("imgInfo", imgAll, this.getkeyC, this.getUploadStyle);
    },
  },
};
</script>

<style lang="stylus" scoped>
.uploadImg {
  text-align: left;
}

.upload-content {
  margin-left: 0.3rem;
}

.upload-title {
  display: flex;
  justify-content: space-between;
  padding: 0.3rem 0.3rem 0.3rem 0;
}

.show-num {
  color: #c9c9c9;
}

.img-list {
  display: inline-block;
  margin: 0.6rem 0.3rem 0.3rem 0;
}

.show-img {
  position: relative;
  display: inline-block;
  margin-right: 30px;
  height: 80px;
  width: 80px;
  border-radius: 5px;
  overflow: hidden;

  .show-img:hover {
    background: rgba(0, 0, 0, 0.3);
    fong-size: 66px;
  }

  img {
    width: 100%;
    height: 100%;
  }

  .msk {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);

    .ico {
      cursor: pointer;
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      color: white;
      font-size: 24px;
    }

    .magnify {
      left: 40%;
    }

    .delete {
      left: 60%;
    }
  }
}

.hide-del {
  display: none;
}

.yd-icon-error {
  position: absolute;
  top: 0;
  right: 0;
}

.uploadSec {
  position: relative;
  display: inline-block;
  overflow: hidden;
  border: 1px dashed #c0ccda;
  background: #fbfdff;
  border-radius: 5px;

  &:hover {
    border-color: #409EFF;
    color: #409EFF;
  }

  input {
    cursor: pointer;
  }

  .choose {
    position: absolute;
    height: 100%;
    width: 100%;
    left: 0;
    top: 0;
    opacity: 0;
  }

  .ico {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 24px;
    cursor: pointer;
  }
}

.fade-enter-active, .fade-leave-active {
  transition: opacity 0.5s;
}

.fade-enter, .fade-leave-to {
  opacity: 0;
}

.show-img img.delete {
  /* background: url("../../assets/delete.png") 50% 50% no-repeat; */
  width: 36px;
  height: 36px;
  position: absolute;
  top: -24px;
  right: -24px;
  display: block;
  transition: all 1s;
}

.show-img img.delete:hover {
  transform: rotate(360deg);
}

// 游戏ICON - 100 * 100 px
.gameIcon {
  width: 100px;
  height: 100px;
}

// 首页游戏推荐宣传图 - 280 * 142 px
.indexPublicity {
  width: 280px;
  height: 142px;
}

// 游戏登录页背景图 - 640*1136px
.loginBackground {
  width: 214px;
  height: 379px;
}

// 游戏登录页背景图 - 640*1136px
.gameFivePublicity {
  width: 216px;
  height: 184px;
}
</style>
